<template>
    <div class="manageTable">
        <el-tabs 
        v-model="tabActiveName"
        :before-leave = "tabLeave"
        @tab-click = "tabsChange"
        style="line-height: 52px; margin: 0;"
        >
            <el-tab-pane
                v-for="(item, index) in tabsOption"
                :key="index"
                :label="item.label"
                :name="item.value"
            >
                <div class="data_wrap">
                    <!-- 搜索 -->
                    <div class="search">
                        <div style = "display: inline-block; margin-top:22px;">
                            <span>公司名称：</span>
                            <el-select v-model = "queryParam.orgId" 
                                style = "width:154px;margin-right:20px;height:36px">
                                <el-option
                                :label = "'全部'"
                                :value = "''"
                                ></el-option>
                                <el-option
                                v-for = "(item2, index2) in comOptions"
                                :key = "index2"
                                :label = "item2.name"
                                :value = "item2.id"
                                ></el-option>
                            </el-select>
                        </div>
                        <div style = "display: inline-block; margin-top:22px;">
                            <span>会议名称：</span>
                            <el-input v-model="queryParam.title" placeholder="请输入会议名称" style="width:154px;margin-right:20px" clearable></el-input>
                        </div>
                        <div style = "display: inline-block; margin-top:22px;">
                            <span v-if="tabActiveName === '0'">会议类型：</span>
                            <el-select v-model="queryParam.type" 
                                v-if="tabActiveName === '0'"
                                style="width:154px;margin-right:20px;height:36px">
                                <el-option
                                v-for = "(item1, index1) in tabsOption"
                                :key = "index1"
                                :label = "item1.label"
                                :value = "item1.value"
                                ></el-option>
                            </el-select>
                        </div>
                        <div style = "display: inline-block; margin-top:22px;">
                            <span class = "demonstration">上传时间：</span>
                            <el-date-picker
                                placeholder = "开始日期"
                                style = "width:160px;margin-right:12px"
                                v-model = "queryParam.startLocalDate" 
                                :clearable = "false"
                                value-format="yyyy-MM-dd"
                                :picker-options="startPickerOptions"
                            ></el-date-picker>至
                            <el-date-picker
                                placeholder = "结束日期"
                                style = "width:160px;margin-left:12px"
                                v-model = "queryParam.endLocalDate"
                                :clearable = "false"
                                value-format="yyyy-MM-dd"
                                :picker-options="endPickerOptions"
                            ></el-date-picker>
                        </div>
                        <el-button
                            type = "primary"
                            style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;"
                            @click = "query">查询</el-button>
                        <el-button 
                            style = "width:52px;margin-left: 12px;padding:0px;height:36px;margin-top:22px;" 
                            @click = "resetQueryParam">重置</el-button>
                    </div>
                    <!-- 表格 -->
                    <div class="table_data">
                        <tableComponent :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" />
                    </div>
                    <!-- 分页 -->
                    <div class="pagination_wrap">
                    <el-pagination
                        background
                        @size-change = "handleSizeChange"
                        @current-change = "handleCurrentChange"
                        :page-sizes = "paginationPageSizes"
                        layout = "total, prev, pager, next, sizes,jumper"
                        :current-page.sync = "paginationParam.currentPage"
                        :page-size = "paginationParam.pageSize"
                        :total = "paginationParam.total"
                        style = "font-weight:400;"
                    ></el-pagination>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
let _that
export default {
    components: {
        tableComponent : () => import('../../comonComponent/table')
    },
    props:{
        permissionBycode: {
            type: Array,
            default: ()=>{
                return []
            }
        }
    },
    data() {
        return {
            code:'jdjb-dtjd-szyd_manage',
            // tab配置参数
            tabsOption: [
                { value: '0', label: '全部会议'},
                { value: '1', label: '党组织会议'},
                { value: '2', label: '总经理办公会议'},
                { value: '3', label: '董事会会议'}
            ],
            tabActiveName: '0',
            // 搜索的配置参数
            queryParam: {
                orgId: '', // 公司/部门名称
                title: '', // 会议名称
                type:'0', // 会议类型 
                startLocalDate: "", //支出时间开始时间
                endLocalDate: "" // 支出时间结束时间
            },
            comOptions: [],
            paginationPageSizes: [10, 30, 50],
            paginationParam: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
            startPickerOptions: {
                disabledDate(time) {
                return _that.queryParam.endLocalDate ? (time.getTime() > new Date(_that.queryParam.endLocalDate).getTime()) : ''
                }
            },
            endPickerOptions: {
                disabledDate(time) {
                return _that.queryParam.startLocalDate ? (time.getTime() < new Date(_that.queryParam.startLocalDate).getTime()) : ''
                }
            },
            // 表格配置参数
            tableData: [],
            tableLabelInit: [
                { type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
                { prop : 'orgName', label : '公司名称', minWidth: '220', fixed : false, render : false, align : 'center'},
                { prop : 'title', label : '会议名称', minWidth: '340', fixed : false, render : false, align : 'center'},
                { prop : 'type', label : '会议类型', minWidth: '210 ', fixed : false, render : false, align : 'center',
                render : (h, params, data) => {
                        let  typeValue = this.tabsOption.find(item => item.value === params.row.type)
                        return h( 'span', {}, typeValue ? typeValue.label : '')
                    } 
                },
                { prop : 'meetingTime', label : '会议时间' , minWidth: '220', fixed : false, render : false, align : 'center'},
                { prop : 'createdTime', label : '上传时间', minWidth: '220', fixed : false, render : false, align : 'center'},
                { prop : 'action', label : '操作', minWidth: '270', fixed : false, option: [],align : 'center',
                    render : (h, params, data) => {
                        return h( 'span', { }, [ 
                            h( "el-button", {style: {display:this.permissionBycode.includes(this.code + '-yl') ? '' : 'none'}, class:'', props:{ size: 'mini' }, on : {
                                click : () => {
                                this.doMeetingPreview(params.row.id)
                                }
                            } }, '预览' ), 
                            h( "el-button", { style: {display:this.permissionBycode.includes(this.code + '-xz') ? '' : 'none'}, class:'', props:{ type: 'primary', size: 'mini' }, on : {
                                click : () => {
                                this.doMeetingDownload(params.row)
                                }
                            } }, '下载')
                        ])
                    } 
                }
            ],
            tableOption : {
                loading:false,
                stripe: false,
                highlightCurrentRow : false,
                border : true,
                height : 610,
                maxHeight : '',
                resizable: false,
                headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
                cellStyle: {height: '50px', padding: 0 }
            }
        }
    },
    computed: {
        tableLabel() {
            let labelOption = this.tableLabelInit.slice(0)
            console.log(this.permissionBycode)
            if (!this.permissionBycode.includes(this.code + '-yl') && !this.permissionBycode.includes(this.code + '-xz')) {
                labelOption.splice(6, 1)
            }
            if (this.tabActiveName !== '0') {
                labelOption.splice(4, 1)
            }
            return labelOption
        },
        //图片获取根路径
        actionUrl() {
            return this.Api.uploadFile;
        },
    },
    mounted() {

        _that = this
        this.getMeetingCompanyList()
        this.queryData()
    },
    methods: {
        // 公司名称下拉列表
        getMeetingCompanyList() {
            this.Api.getMeetingCompanyList().then(res => {
                if (res && res.code === '0') {
                    this.comOptions = res.data
                } else {
                    this.comOptions = []
                    this.$message.warning(res.message)
                }
            })
        },
        // tab 切换触发事件
        tabsChange (tab, event) { },
        // 切换标签之前钩子函数 判断tab切换 初始化子组件数据
        tabLeave (activeName, oldActiveName) {
            if (activeName == oldActiveName) return
            Object.assign(this.$data.queryParam, this.$options.data().queryParam)
            Object.assign(this.$data.paginationParam, this.$options.data().paginationParam)
            this.tabActiveName = activeName
            this.queryData()
        },
        // 三重一大的数据列表数据获取
        queryData () {
            this.tableOption.loading = true
            let data = JSON.parse(JSON.stringify(this.queryParam))
            data.pageSize = this.paginationParam.pageSize
            data.pageNum = this.paginationParam.pageNum
            data.type = this.tabActiveName === '0' ? (data.type === '0' ? '' : data.type) : this.tabActiveName
            this.Api.getMeetingManagePage(data).then(res => {
                if (res && res.code === '0') {
                    this.tableData = res.data.records
                    this.paginationParam.total = res.data.total
                    if (Math.ceil(this.paginationParam.total / this.paginationParam.pageSize) < this.paginationParam.pageNum) {
                        this.paginationParam.pageNum = Math.ceil(this.paginationParam.total / this.paginationParam.pageSize)
                        this.queryData()
                    }
                } else {
                    this.tableData = []
                    this.paginationParam.total = 0
                    this.$message.warning(res.message)
                }
                this.tableOption.loading = false
            })
        },
        // 查询点击事件
        query() {
            this.queryData()
        },
        // 分页pageSize 改变触发事件 
        handleSizeChange(val) {
            this.paginationParam.pageSize = val
            this.queryData()
        },
        // 分页currentPage 改变触发事件
        handleCurrentChange(val) {
            this.paginationParam.pageNum = val
            this.queryData()
        },
        // 搜索栏重置事件
        resetQueryParam() {
            Object.assign(this.$data.queryParam, this.$options.data().queryParam)
            Object.assign(this.$data.paginationParam, this.$options.data().paginationParam)
        },
        // 下载会议附件
        doMeetingDownload(e) {
            this.Api.doMeetingDownload({id: e.id}).then(res => {
                if (res) {
                    let url = window.URL.createObjectURL(new Blob([res],{ type:'text/plain'}))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download','file.pdf')
                    document.body.appendChild(link)
                    link.click()
                } else {
                    this.$message.warning('会议附件下载失败')
                }
            })
        },
        // 预览会议文件
        doMeetingPreview(id) {
            this.Api.doMeetingPreview({id: id}).then(res => {
                if (res && res.code === '0') {
                    window.open(this.$store.state.PortalManagement.fileIp + res.data, '_blank');
                } else {
                    this.$message.warning('会议附件预览失败')
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
    .manageTable {
        .data_wrap {
            width:100%;
            display: flex;
            flex-direction: column;
            // 搜索
            .search {
                margin-bottom: 20px;
                width:100%;
                /deep/ .el-input__inner {
                height: 36px;
                }
                /deep/.el-icon-date
                {
                line-height: 36px;
                position: absolute;
                    left: 120px;
                }
                /deep/.el-icon-arrow-up{
                line-height: 36px;
                }
            }
            .table_data {
                flex: 1;
            }
            // 下拉框样式
            .pagination_wrap {
                display: flex;
                justify-content: flex-end;
                bottom: 0;
                right: 0;
                /deep/ .el-pagination {
                margin-top: 0;
                padding-top:20px;
                padding-bottom:20px;
                line-height: normal;
                }
            }
        }
        /deep/ .el-tabs__header{
            margin:0;
        }
    }
    
</style>